<template>
  <div>
    <div class="img-bar"
      :style="{padding: pictureProps.verticalMargin + 'px ' + pictureProps.horizontalMargin + 'px'}">
      <div class="image pos-rel"
        :class="{'double-img': pictureProps.picStyle !== '10'}"
        :style="{width: pictureProps.picStyle === '10' ? '100%' : '50%'}"
        v-for="(img, imgIndex) in pictureInfo"
        :key="imgIndex" @click="linkTo(img)">
        <button v-if="img.linkType === '1012' && enterpriseCustomerServiceAuthority === 1" :send-message-title="nickname + '的V客主页'" plain
        send-message-img="https://veekrayimg.joinsun.vip/images/share-s-picture.png" show-message-card="true"
          send-message-path="/pages/home/main" open-type="contact" class="contactBtn hidden-submit button-icon"
          :session-from="'7moor|'+ nickname + '|' + avatar +'|'+ customField"></button>
        <template v-if="pictureProps.picStyle === '10'">
          <template v-if="!iOS">
            <image :id="imgIndex === 0 ? 'img-bar-' + index : ''"
              :style="{width: '100%', height: img.height ? img.height + 'px' : pictureProps.pictureHeight + 'px', borderRadius: pictureProps.radius + 'px'}"
              :src="img.imgUrl + '?imageView2/2/w/750'" v-if="img.imgUrl" alt=""></image>
          </template>
          <template v-else>
            <image :id="imgIndex === 0 ? 'img-bar-' + index : ''"
              :style="{width: '100%', height: 'auto', borderRadius: pictureProps.radius + 'px'}"
              mode="widthFix"
              :src="img.imgUrl + '?imageView2/2/w/750'" v-if="img.imgUrl" alt=""></image>
          </template>
        </template>
        <template v-if="pictureProps.picStyle !== '10'">
          <image :id="imgIndex === 0 ? 'img-bar-' + index : ''"
            :style="{height: pictureProps.height + 'px', borderRadius: pictureProps.radius + 'px'}"
            :src="img.imgUrl + '?imageView2/2/w/750'" v-if="img.imgUrl" alt=""></image>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      defaultSpace: 15, // 样式二默认图片边距15px
      exposedWidth: 50, // 两侧图片露出来的宽度
      customField: {},
      iOS: false
    }
  },
  props: {
    pad: {
      type: Array,
      default: [0, 0]
    },
    pictureInfo: {
      type: Array,
      default: []
    },
    pictureProps: {
      type: Object,
      default: {}
    },
    enterpriseCustomerServiceAuthority: {
      default: 0
    },
    nickname: {
      type: String
    },
    avatar: {
      type: String
    }
  },
  onLoad() {
    if (!this.$pt.getStorageSync('iOS')) {
      // android类型
      this.iOS = false
    } else {
      this.iOS = true
    }
  },
  watch: {
    pictureInfo: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.pictureInfo = newVal
      }
    },
    pictureProps(newVal) {
      this.pictureProps = newVal
    }
  },
  mounted() {
  },
  methods: {
    linkTo(item) {
      if (item.linkType === '1012' && this.enterpriseCustomerServiceAuthority === 1) return
      this.$emit('linkTo', item)
    },
    changeImg(e) {
      this.current = e.mp.detail.current
    }
  }
}
</script>
<style scoped lang="less" scoped>
.img-bar {
  font-size: 0;
  .image {
    display: block;
    &.double-img{
      display: inline-block;
    }
    image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}
.style-1 {
  .main-style1-box {
    width: 100%;
    box-sizing: border-box;
    .style1-swiper-item {
      box-sizing: border-box;
      height: 100%;
      // img {
      //   width: 100%;
      //   height: 100%;
      // }
    }
  }
}

.style-2 {
  .main-style2-box {
    .style2-swiper-item {
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      img {
        width: 100%;
        transition: all 0.3s;
      }
      .button-icon{
        border: unset !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
}
.contactBtn {
  width: 100% !important;
  height: 100% !important;
  background-size: 100% !important;
}
</style>
